<template>
  <div>
    <h1>商户管理</h1>
    <el-button type="success" @click="audit">审核</el-button>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="id"
        label="商户ID"
        width="120"
      />
      <el-table-column
        prop="name"
        label="商户名称"
        width="120"
      />
      <el-table-column
        prop="corporation"
        label="法人"
        width="120"
      />
      <el-table-column
        prop="address"
        label="地址"
        width="120"
      />
      <el-table-column
        label="类型"
        width="120"
      >
        <template slot-scope="scope">
          {{scope.row.type==1? '个人职业房东' : '公司化公寓'}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="120"
      >
        <template slot-scope="scope">
          {{scope.row.status==1? '审核通过' : scope.row.status==3? '待审核' : '审核未通过'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="管理员"
        width="120"
      />
      <el-table-column
        prop="createTime"
        label="日期"
        width="120"
      />
    </el-table>
    <el-pagination
      :current-page="roleFm.pageNum"
      :page-size="roleFm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="roleFm.total"
      :page-count="roleFm.pageCount"
      @current-change="handleCurrentChange"
    />
    <el-dialog :visible.sync="visible" :before-close="handleClose">
      <el-form :model="form" label-width="80px">
        <el-form-item label="商户ID">
          <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item label="商户名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="法人">
          <el-input v-model="form.corporation" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="form.type==1? '个人职业房东' : '公司化公寓'" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="form.status==1? '审核通过' : form.status==3? '待审核' : '审核未通过'"></el-input>
        </el-form-item>
        <el-form-item label="管理员">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="form.createTime" />
        </el-form-item>
        <el-button type="primary" @click="pass">通过</el-button>
        <el-button type="primary" @click="nopass">不通过</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'BusinessList',
  data() {
    return {
      tableData: [],
      visible: false,
      multipleSelection: [],
      roleFm: {
        pageNum: 12,
        pageSize: 10,
        total: 0,
        pageCount: 1
      },
      form: {
        id: '',
        name: '',
        corporation: '',
        address: '',
        type: '',
        status: '',
        username: '',
        createTime: ''
      }
    }
  },
  created() {
    this.businessList();
  },
  methods: {
    businessList() {
      axios.post('http://localhost:8200/sys/business/list', this.roleFm).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.roleFm.pageNum = res.data.current
        this.roleFm.pageSize = res.data.size
        this.roleFm.total = res.data.total
        this.roleFm.pageCount = res.data.pages
      })
    },
    handleCurrentChange(val) {
      this.roleFm.pageNum = val
      this.index()
    },
    audit() {
      if(this.multipleSelection.length!=1){
        this.$alert('请选择一条数据')
        this.multipleSelection = []
        return;
      }else{
        this.visible = true
        this.multipleSelection = []
      }
    },
    handleSelectionChange(vals) {
      for (const val of vals) {
        this.form.id = val.id
        this.multipleSelection.push(val)
        this.form.name = val.name
        this.form.corporation = val.corporation
        this.form.address = val.address
        this.form.type = val.type
        this.form.status = val.status
        this.form.username = val.username
        this.form.createTime = val.createTime
      }
    },
    pass() {
      axios.post('http://localhost:8200/sys/business/pass', this.form).then((res) => {
        if (res.data.obj) {
          alert(res.data.msg)
          this.visible = false
          this.index()
        }else {
          alert("操作成功")
          this.visible = false
          this.index()
        }
      })
    },
    nopass() {
      axios.post('http://localhost:8200/sys/business/nopass', this.form).then((res) => {
        if (!res.data.obj) {
          alert(res.data.msg)
          this.visible = false
          this.index()
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.multipleSelection=[]
        })
        .catch(_ => {});
    }
  },
}
</script>

<style scoped>

</style>
